<template>
    <div class="video-container">
        <div v-for="video in videoList" :key="video.id" class="video-item">
            <video controls :src="video.src" class="video-player"></video>
            <div class="video-info">
                <van-image :src="video.avatar" round width="30" height="30" />
                <span class="video-author">{{ video.author }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const videoList = ref([
    {
        id: 1,
        src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        author: 'User1'
    },
    {
        id: 2,
        src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        author: 'User2'
    },
    {
        id: 3,
        src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        author: 'User3'
    }
]);
</script>

<style scoped>
.video-container {
    padding: 10px;
}

.video-item {
    margin-bottom: 20px;
}

.video-player {
    width: 100%;
    border-radius: 10px;
}

.video-info {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.video-author {
    margin-left: 10px;
    font-size: 14px;
}
</style>